<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/6/17 0017
  Time: 9:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<% String basePath = request.getScheme() + "://" + request.getServerName() +
        ":" + request.getServerPort() + request.getContextPath() + "/";%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>MyBlog</title>
</head>

<body>
<div id="box1">
</div>
<div id="box2">
    hello
</div>
<input type="button" name="btn" id="btn" value="测试ajax" />
</body>
<script src="js/jquery-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/ajax.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
   /* document.getElementById("btn").onclick=function() {
        //创建我们的ajax对象
        var ajax = getAjax();
        //设置我们的请求路径,第一个参数表示请求方式,第二个参数表示请求地址,第三个表示异步开启
        ajax.open("GET", "users/ajax", true);
        //发送我们的请求
        ajax.send();
        //通过onreadystatechange监听我们的ajax状态
        ajax.onreadystatechange = function () {
            //判断成功的状态码
            if (ajax.status ==200  && ajax.readyState==4 ) {
                //获取我们后台返回的数据
                var text = ajax.responseText;
                //需要获取前端的结点,然后渲染数据
                document.getElementById("box1").innerHTML = text;
            }
        }
    }*/


    $("#btn").click(function(){
        $.ajax({
            //请求方式
            type:"GET",
            //表示请求地址
            url:"users/ajax",
            //请求的参数
            //	data:{},		//当是Post请求时,data里面需要放数据
            //	data:$("#btn").serialize(),//序列化
            //后台返回的数据类型
            dataType:"json",
            success:function(result){
            //    $("box1").val(result);
                document.getElementById("box1").innerHTML=result.msg;
                //等于document.getElementById("box1").innerHTML=result
            },
            //ajax写法有错时,如果是后台有错,后台会直接返回来,不用写error
            // error:function(){
            //
            // }
        })
    })
</script>
</html>
